import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { List, Card, Typography, Flex } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
import { LeftOutlined } from '@ant-design/icons';

const { Title, Text } = Typography;

interface Circle {
    id: number;
    name: string;
    description: string;
    avatar?: string;
    coverImage?: string;
    memberCount: number;
    postCount: number;
    isPrivate: boolean;
}

const CircleListPage: React.FC = () => {
    const [circles, setCircles] = useState<Circle[]>([]);
    const [loading, setLoading] = useState<boolean>(true);
    const [error, setError] = useState<string | null>(null);
    const navigate = useNavigate();
    const location = useLocation();

    useEffect(() => {
        const fetchCircles = async () => {
            try {
                const response = await axios.get('/api/circles');
                if (response.data && Array.isArray(response.data.circles)) {
                    setCircles(response.data.circles);
                } else {
                    setError('获取圈子列表数据结构异常');
                    setCircles([]);
                    console.error('获取圈子列表数据结构异常:', response.data);
                }
            } catch (err) {
                setError('加载圈子列表失败');
                setCircles([]);
                console.error('获取圈子列表失败:', err);
            } finally {
                setLoading(false);
            }
        };

        fetchCircles();
    }, []);

    const circlesToRender = Array.isArray(circles) ? circles : [];

    if (loading) {
        return <p>加载中...</p>;
    }

    if (error) {
        return <p>{error}</p>;
    }

    return (
        <div>
            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px' }}>
                {location.key !== 'default' && (
                    <LeftOutlined
                        style={{ fontSize: '24px', marginRight: '16px', cursor: 'pointer' }}
                        onClick={() => navigate(-1)}
                    />
                )}
                <Title level={2} style={{ margin: 0 }}>圈子列表</Title>
            </div>
            {circlesToRender.length === 0 ? (
                <p>暂无圈子</p>
            ) : (
                <List
                    grid={{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 4, xxl: 4 }}
                    dataSource={circlesToRender}
                    renderItem={circle => (
                        <List.Item>
                            <Card
                                title={<Title level={4}>{circle.name}</Title>}
                                hoverable
                                onClick={() => navigate(`/circles/${circle.id}`)}
                            >
                                <Flex vertical>
                                    <Text>{circle.description}</Text>
                                    <Text type="secondary">成员数: {circle.memberCount}</Text>
                                    <Text type="secondary">帖子数: {circle.postCount}</Text>
                                </Flex>
                            </Card>
                        </List.Item>
                    )}
                />
            )}
        </div>
    );
};

export default CircleListPage; 